<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>vue.draggable group例子</title>
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
  <script src="https://www.itxst.com/package/vue/vue.min.js"></script>
  <script src="https://www.itxst.com/package/sortable/Sortable.min.js"></script>
  <script src="https://www.itxst.com/package/vuedraggable/vuedraggable.umd.min.js"></script>
  <style>
    /*定义要拖拽元素的样式*/
    .ghost {
      background-color: blue !important;
    }

    .chosenClass {
      background-color: red !important;
      opacity: 1 !important;
    }

    .dragClass {
      background-color: blueviolet !important;
      opacity: 1 !important;
      box-shadow: none !important;
      outline: none !important;
      background-image: none !important;
    }

    .itxst {
      margin: 10px;
      min-height: 200px;
    }

    .title {
      padding: 6px 12px;
    }

    .col {
      width: 40%;
      flex: 1;
      padding: 10px;
      border: solid 1px #eee;
      border-radius: 5px;
      float: left;
    }

    .col+.col {
      margin-left: 10px;
    }

    .item {
      padding: 6px 12px;
      margin: 0px 10px 0px 10px;
      border: solid 1px #eee;
      background-color: #f1f1f1;
    }

    .item:hover {
      background-color: #fdfdfd;
      cursor: move;
    }

    .item+.item {
      border-top: none;
      margin-top: 6px;
    }
  </style>
</head>
<body style="padding:10px;">
  <div id="app">
    <!--使用draggable组件-->
    <div class="itxst">
      <div class="col">
        <div class="title">拖拽到B组试试看,小于4个元素不允许拖拽</div>
        <draggable v-model="arr1" :group="groupA" animation="300" dragClass="dragClass" ghostClass="ghostClass"
          chosenClass="chosenClass">
          <transition-group :style="style">
            <div class="item" v-for="item in arr1" :key="item.id">
              {{ item.name }}
            </div>
          </transition-group>
        </draggable>
      </div>
      <div class="col">
        <div class="title">B组（本组是个空数组）</div>
        <draggable v-model="arr2" :group="groupB" animation="300" dragClass="dragClass" ghostClass="ghostClass"
          chosenClass="chosenClass">
          <transition-group :style="style">
            <div class="item" v-for="item in arr2" :key="item.id">
              {{ item.name }}
              <draggable  v-if="item.arr" v-model="item.arr" group="itxst" animation="300" dragClass="dragClass" ghostClass="ghost"
                chosenClass="chosenClass">
                <transition-group :style="style">
                  <div class="item" v-for="v in item.arr" :key="v.id">
                    {{ v.name }}
                  </div>
                </transition-group>
              </draggable>
            </div>
          </transition-group>
        </draggable>
      </div>
    </div>
    <div style="display: block">{{ message }}</div>
  </div>
  <script>
    // debugger;
    Vue.component('vuedraggable', window.vuedraggable.name)
    var app = new Vue({
      el: '#app',
      components: {
        vuedraggable,
      },
      data() {
        return {
          drag: false,
          message: "",
          groupA: {
            name: "itxst",
            put: true, //可以拖入
            pull: () => {
              if (this.arr1.length <= 1) {
                this.message = "元素小于等于1不允许再拖拽了";
              }
              return this.arr1.length > 1;
            },
          },
          groupB: {
            name: "itxst",
            pull: "clone", //B组拖拽时克隆到A组
            put: true,
          },
          //定义要被拖拽对象的数组
          arr1: [
            { id: 1, name: "www.itxst.com", arr:[{id: 11, name: "www.itxstson.com"}] },
            { id: 2, name: "www.jd.com", arr:[{id: 21, name: "www.jdson.com"}] },
            { id: 3, name: "www.baidu.com", arr:[{id: 31, name: "www.baiduson.com"}] },
            { id: 4, name: "www.taobao.com", arr:[{id: 41, name: "www.taobaoson.com"}] },
          ],
          arr2: [], //空数组
          arr3: [], //空数组
          //空数组之在的样式，设置了这个样式才能拖入
          style: "min-height:120px;display: block;",
        };
      },
      methods: {
        //开始拖拽事件
        onStart() {
          this.drag = true;
          return true;
        },
        //拖拽结束事件
        onEnd() {
          this.drag = false;
        },
      },
    });
  </script>
</body>
</html>